<template>
  <div v-if="remendata">
    <div style="position: relative">
      <img src="../assets/Regebeijing.jpg" alt="" style="z-index: -1" />
      <div class="imgicon" ><div class="timeupdata">更新时间：{{remendata.trackUpdateTime|timesss}}</div ></div>
      
    </div>
    <SongList
      @AudioId="$emit('AudioId', $event)"
      v-for="(item, index) in remendata.tracks.slice(0, 30)"
      :key="item.id"
      :item="item"
      :idx="index"
      :AudioplaysongId="AudioplaysongId"
      :playing="playing"

      :songlist="songlist"
 @addsonglist="$emit('addsonglist',$event)"
 @delsong="$emit('delsong',$event)"
      >{{ item.name }}
      </SongList
    >
  </div>
</template>

<script>
import SongList from "@/components/SongList.vue";

export default {
  components: {
    SongList,
  },
  props: {
    AudioplaysongId: Number,
    playing: Boolean,
    songlist:Array
  },
  data() {
    return {
      remendata: null,
    };
  },
  created() {
    this.axios.get("/playlist/detail?id=3778678").then((res) => {
      console.log(res.data.playlist);

      this.remendata = res.data.playlist;
    });
  },
};
</script>

<style lang="less" scoped>
.imgicon {
  background: url("../assets/iconsp.png") no-repeat;
  position: absolute;
  left: 10px;
  top: 20px;
  width: 400px;
  height: 115px;
  background-position:-30px -30px;
  background-size:200px 120px;
  display: flex;
  align-items: flex-end;
  color: white;
  // font-weight: 700;
}
</style>